<template>
  <div id="app">
    <img src="@/assets/logo.png" class="logo" />
      <div class="turn rotate">
        <div v-for="(item, index) in list" :key="index" :class="`div${index + 1}`" @touchend="touchend">
          <img src="@/assets/logo.png" />
        </div>
      </div>
  </div>
</template>
<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
@Component
export default class App extends Vue {
  list = new Array(3)

  box: unknown = null
  rotate = 120
  index = 0
  mounted () {
    this.box = document.querySelector('.turn')
  }

  onClick (key: number) {
    console.log(key)
  }

  /**
   * 这个其实是一个transition动画，不是真正意义上的轮播图，
   * 因为是18个罗汉，我给的建议是让最外层盒子移动，然后在每次移动的过程中给每个罗汉分别添加样式，
   * 我这里用的3个演示，18个同理，只是样式还需要调整下
   */
  touchend () {
    this.index += 1
    const box = document.querySelector('.turn') as HTMLElement
    box.style.transform = 'rotate(' + this.rotate + 'deg)'
    box.style.transition = 'linear 1s'
    this.rotate += 120
    const div1 = document.querySelector('.div1') as HTMLElement
    const div2 = document.querySelector('.div2') as HTMLElement
    const div3 = document.querySelector('.div3') as HTMLElement
    switch (this.index % 3) {
      case 1:
        div1.style.width = '30px'
        div2.style.width = '30px'
        div3.style.width = '40px'
        break
      case 2:
        div1.style.width = '30px'
        div2.style.width = '40px'
        div3.style.width = '30px'
        break
      case 3:
        div1.style.width = '40px'
        div2.style.width = '30px'
        div3.style.width = '30px'
        break
    }
  }
}
</script>
<style lang="scss">
.logo {
  position: absolute;
  top: 220px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
}
.turn {
  width: 300px;
  height: 300px;
  border: 1px solid #ccc;
  border-radius: 300px;
  position: relative;
  top: 100px;
  left: 30px;
  overflow: hidden;
  // transform: translateX(-50%);

  .div1, .div2, .div3 {
    width: 40px;
    img {
      width: 100%;
    }
  }
  .div1 {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
  }
  .div2 {
    position: absolute;
    left: 45px;
    top: 45px;
    width: 30px;
    img {
      width: 100%;
    }
  }
  .div3 {
    position: absolute;
    right: 45px;
    top: 45px;
    width: 30px;
    img {
      width: 100%;
    }
  }
}
.rotate {
  animation: myRotate 2s linear infinite;
}
// @keyframes myRotate {
//   0% {
//     transform: rotate(0deg)
//   }
//   100% {
//     transform: rotate(-120deg)
//   }
// }
</style>
